<template>
	<view :style="$theme.pageStyle">
		<view class="promoter-order">
			<timeSlot @changeTime="changeTime"></timeSlot>
			<view class='list' v-if="DataList.length>0">
				<view class="top_num">
					共 <text class="main_color">{{total}}</text> 笔订单
				</view>
				<block v-for="(item,index) in DataList" :key="index">
					<view class='item'>
						<view class='listn'>
							<view class='itenm'>
								<view class='top acea-row row-between-wrapper'>
									<view class='pictxt acea-row row-between-wrapper'>
										<view class='pictrue'>
											<image :src='item.user.avatar'></image>
										</view>
										<view class='text line1'>{{item.user.nickname}}</view>
									</view>
									<view class='money' v-if="item.status == 1">返佣：<text
											class='font-color'>￥{{item.rate}}</text></view>
									<view class='money' v-else>暂未返佣：<text class='font-color'>￥{{item.rate}}</text>
									</view>
								</view>
								<view class='bottom'>
									<view class="msg">
										<text class='name'>购买类型：</text>
										<view class="store_name line1" style="display: flex;">
											<!-- 1咨询 2合同 3课程 4服务 5用户会员 6顾问会员 7分销会员 8案情评测 -->
											<span style="color: #e45656;" v-if="item.type === 1">咨询</span>
											<span style="color: #e45656;" v-if="item.type === 2">合同</span>
											<span style="color: #e45656;" v-if="item.type === 3">课程</span>
											<span style="color: #e45656;" v-if="item.type === 4">服务</span>
											<span style="color: #e45656;" v-if="item.type === 5">用户会员</span>
											<span style="color: #e45656;" v-if="item.type === 6">顾问会员</span>
											<span style="color: #e45656;" v-if="item.type === 7">分销会员</span>
											<span style="color: #e45656;" v-if="item.type === 8">案情评测</span>
											<span style="color: #e45656;" v-if="item.type === 9">权益包</span>
										</view>
									</view>
									<view class="msg">
										<text class='name'>订单服务：</text>
										<view class="store_name line1 u-line-1">
											{{item.goods.name}}
										</view>
									</view>
									<view class="msg">
										<text class='name'>商品价格：</text>
										<view class="store_name line1">
											{{item.order_amount}}
										</view>
									</view>
									<view v-if="item.status == 1"><text
											class='name'>返佣时间：{{item.settlement_time ? item.settlement_time : '-'}}</text>
									</view>
									<view v-else><text class='name'>下单时间：{{item.create_time}}</text></view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view v-if="DataList.length == 0">
				<u-empty
				        mode="data"
						style="margin-top: 50px;"
				>
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import timeSlot from '../components/timeSlot/index.vue'
	import $H from '@/common/js/request.js';
	export default {
		components: {
			timeSlot
		},
		data() {
			return {
				name: '',
				keyword: '',
				DataList: [],
				current: 0,
				hasMore: false,
				loading: true,
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				start: 0,
				stop: 0,
				total: 0,
			};
		},
		onLoad() {
			this.timeer()
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			changeTime(time) {
				console.log(time)
				this.start = time.start
				this.stop = time.stop
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('distribution/DistributionOrder', {
						'page': page,
						'limit': this.limit,
						'start': this.start,
						'stop': this.stop,
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.total = res.data.total
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			submitForm() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},

		},
	}
</script>


<style scoped lang="scss">
	.sys-title {
		z-index: 10;
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 30rpx;
		color: #fff;
		background-color: var(--view-theme);
		// #ifdef MP || APP-PLUS
		text-align: center;
		// #endif
	}

	.sys-head {
		background-color: #fff;
	}

	.promoter-order .header {
		width: 100%;
		height: 96rpx;
		background-color: var(--view-theme);
		border-bottom: 1rpx solid #f5f5f5;
	}

	.promoter-order .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.promoter-order .header .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.promoter-order .header .input .placeholder {
		color: #999;
	}

	.promoter-order .header .input input {
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
	}

	.promoter-order .list .item .title {
		height: 133rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #999;
	}

	.promoter-order .list .item .title .data {
		font-size: 28rpx;
		color: #282828;
		margin-bottom: 5rpx;
	}

	.promoter-order .list .item .listn .itenm {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 14rpx;
	}

	.promoter-order .list .item .listn .itenm~.itenm {
		margin-top: 12rpx;
	}

	.promoter-order .list .item .listn .itenm .top {
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1rpx solid #eee;
		height: 100rpx;
	}

	.promoter-order .list .item .listn .itenm .top .pictxt {
		width: 320rpx;
	}

	.promoter-order .list .item .listn .itenm .top .pictxt .text {
		width: 230rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.promoter-order .list .item .listn .itenm .top .pictxt .pictrue {
		width: 66rpx;
		height: 66rpx;
	}

	.promoter-order .list .item .listn .itenm .top .pictxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 3rpx solid #fff;
		box-sizing: border-box;
	}

	.promoter-order .list .item .listn .itenm .top .money {
		font-size: 28rpx;
	}

	.promoter-order .list .item .listn .itenm .bottom {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;

		.msg {
			display: flex;
			align-items: center;
		}
	}

	.promoter-order .list .item .listn .itenm .bottom .name {
		color: #999999;
	}

	.promoter-order .list .item .listn .itenm .bottom .store_name {
		width: 450rpx;
		color: #666666;
	}

	.top_num {
		padding: 30rpx 30rpx 0;
		font-size: 26rpx;
		color: #666;
	}

	.main_color {
		color: #E93323;
	}


	.acea-row {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}

	.acea-row.row-between-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
</style>